<script setup lang="ts">
import { defineOptions } from 'vue'
import { ref, reactive } from 'vue'
import { loginApi } from '@/api/login'
import type { FormInstance, FormRules } from 'element-plus'
import router from '@/router';
import { ElMessage } from 'element-plus'
import { userStore } from '@/stores/user'

defineOptions({
    name: 'LogonView'
})


interface RuleForm {
    username: string
    password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    username: 'BBBAN_',
    password: '12345678'
})

const store = userStore()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loginApi(ruleForm)
                .then(({ data }) => {
                    if (data.code === -1) {
                        console.log(data.msg);
                        ElMessage({
                            showClose: true,
                            message: data.msg,
                            type: 'error',
                        })
                    } else {
                        ElMessage({
                            showClose: true,
                            message: data.msg,
                            type: 'success',
                        })
                        store.userinfo = data.data
                        localStorage.setItem('hasRefreshed', 'false');
                        localStorage.setItem('userStore', JSON.stringify(data.data));
                        console.log("login");
                        console.log(data.data);
                        router.push({
                            path: '/home'
                        })
                    }
                })
                .catch(err => {
                    console.log('login');
                    console.log(err);
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: 'Please input your username', trigger: 'blur' },
        { min: 3, max: 8, message: 'Length should be 3 to 8', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input your password', trigger: 'blur' },
        { min: 5, max: 12, message: 'Length should be 5 to 12', trigger: 'blur' },
    ],
})


</script>

<template>
    <div id="login">
        <div class="loginBox">
            <div class="leftBox">

                <h1><img class="cubeImg" src="@/assets/cube.png">NewsCube</h1>
                <img class="loginImg" src="@/assets/login.png">
            </div>
            <div class="divider">

            </div>
            <div class="rightBox">
                <h1>Log In</h1>
                <el-form ref="ruleFormRef" hide-required-asterisk :model="ruleForm" label-width="80px" label-position="top"
                    size="large" :rules="rules">
                    <el-form-item label="Username" prop="username">
                        <el-input v-model="ruleForm.username" />
                    </el-form-item>

                    <el-form-item label="Password" prop="password">
                        <el-input type="password" v-model="ruleForm.password" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"
                            color="rgb(55, 86, 205)">LOGIN</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang='less' scoped>
#login {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, rgb(52, 84, 205), rgb(136, 149, 204));


    .loginBox {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1550px;
        height: 720px;
        background-color: #fff;
        box-shadow: 0 0 50px #676767;
        border-radius: 30px;

        .leftBox {
            flex: 1;
            width: 720px;
            height: 720px;

            .cubeImg {
                transform: translate(-20px, 10px);
                height: 50px;
            }

            h1 {
                position: relative;
                top: 10%;
                left: 15%;
            }

            .loginImg {
                position: relative;
                top: 15%;
                left: 15%;
                height: 520px;

            }
        }

        .divider {
            padding: 10px 0;
            transform: translateY(5%);
            width: 1px;
            height: 90%;
            background-color: #ccc;
        }

        .rightBox {
            flex: 1;
            padding: 120px 0px;
            width: 720px;
            height: 720px;
            border-radius: 0 30px 30px 0;

            h1 {
                margin-left: 120px;
            }

            .el-form {
                margin-top: 50px;
                margin-left: 120px;

                .el-button {
                    margin-top: 50px;
                    width: 480px;
                }

                .el-input {
                    width: 480px;
                }
            }


        }
    }
}
</style>